<template>
    <div class="triangle"></div>
    <div class="container">
        <div class="content">
            是否需要导入表实例?
            <div class="but">
                <button @click="emit('closeWin')">取消</button><button @click="getExcel">确认</button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineProps, defineEmits, getCurrentInstance } from 'vue';
import axios from 'axios';
import { getUserData } from '../utils';

const emit = defineEmits(['closeWin'])

const props = defineProps({
    type: Number
})

const {proxy} = getCurrentInstance()
// 获得用户信息
// 获得用户信息
let userData = {
    Token: "",
    avatar: "",
    id: "",
    role: ""
};
if (getUserData() != undefined) {
    userData = getUserData();
}

const getExcel = function () {
    axios({
        headers: {
            'Content-Type': 'application/json; charset=utf-8',
            'Token': userData.Token,
        },
        method: 'get',
        url: proxy.$http + '/gp/admin/excel/get?type='+props.type,
        responseType: 'blob',
    }).then((data) => {
        // 创建一个 a 标签，并隐藏 a 标签
        let a = document.createElement("a");
        a.style.display = "none";
        // 对象 URL 绑定到 a 标签上
        a.href = window.URL.createObjectURL(new Blob([data.data]));
        // 给 a 标签添加 download 属性 与 文件名
        a.setAttribute("download", `导入表示例${new Date().toLocaleString()}.xlsx`);
        // 把 a 标签挂载到 dom 树上并执行 a 标签的 click 事件
        document.body.appendChild(a);
        a.click();
        // 释放我们创建的 url 和 a 标签
        window.URL.revokeObjectURL(a.href);
        document.body.removeChild(a);
    }).catch((data) => {
        console.log('error');
    })
}


</script>
<style scoped>
.container {
    width: 200px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    ;
    opacity: 1;
    border-radius: 4px;
    font-family: Source Han Sans CN;
}

.triangle {
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    position: absolute;
    z-index: 10;
    top: -5%;
    left: 50%;
    translate: -50%;
    border-top: 0px;
}

.but {
    width: 100%;
    height: 20px;
    margin-top: 20%;
    display: flex;
    justify-content: space-between;
    padding-right: 3%;
    padding-left: 3%;
}

.but button {
    width: 45%;
    height: 100%;
    background-color: #939393;
    color: #ffffff;
    border: 0px;
    cursor: pointer;
    font-family: Source Han Sans CN;
    border-radius: 2px;
}

.but button:hover {
    transition: 0.2s;
    background-color: #707070;
}

.but button:nth-of-type(2) {
    background-color: #8493a6;
}

.but button:nth-of-type(2):hover {
    background-color: #707070
}
</style>